<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .mdiv{
            width: 100px;
            height: 100px;
            background-color: #097df3;
        }
    </style>
</head>

<body>
<div style="height: 1000px"></div>
<div class="mdiv" id="mdiv"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 window.onscroll = function (event) {    
    //原生
    //获取div距离顶部的距离
    // var mTop = document.getElementsByClassName('mdiv')[0].offsetTop;
    // //减去滚动条的高度
    // var sTop = document.body.scrollTop;
    // var result = mTop - sTop;
    // console.log(result);
    //Jquery
    // mTop = $('.mdiv')[0].offsetTop;
     mTop = document.getElementById('mdiv').offsetTop;
    sTop = $(window).scrollTop();
    result = mTop - sTop;
    console.log(mTop);
    console.log(result);
}
</script>
</body>
</html>